<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="spreadjs culture" content="zh-cn" />
    <title>懒加载和增量加载</title>

    <link href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.18.2.0.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.designer.18.2.0.min.css" rel="stylesheet" type="text/css" />
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.18.2.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/resources/zh/gc.spread.sheets.resources.zh.18.2.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.shapes.18.2.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.charts.18.2.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.slicers.18.2.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.tablesheet.18.2.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.print.18.2.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.pdf.18.2.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.barcode.18.2.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.pivot.pivottables.18.2.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.ganttsheet.18.2.0.min.js"></script>
    <script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.2.0/spread-sheets-io/dist/gc.spread.sheets.io.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.designer.resource.cn.18.2.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.designer.all.18.2.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/interop/gc.spread.excelio.18.2.0.min.js"></script>
    <script src="https://cdn.grapecity.com.cn/spreadjs/scripts/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/js/FileSaver.js" type="text/javascript"></script>

    <style type="text/css">
        html,
        body {
            overflow: hidden;
            padding: 0;
            margin: 0;
            height: 100%;
        }

        #gc-designer-container {
            height: 90vh;
            width: 100vw;
        }

        label {
            font-size: 12px;
            text-align: middle;
        }

        .flex {
            display: flex;
            align-items: center;
        }

        #btn {
            margin-left: 100px;
        }

        #checkbox {
            width: 20px;
        }

        #filename {
            margin-left: 20px;
        }
    </style>
</head>

<body unselectable="on">
    <div class="flex">
        <!-- <input type="file" id="file" /> -->
        <input type="checkbox" id="checkbox1"/>
        <label for="checkbox1">懒加载</label>

        <input type="checkbox" id="checkbox2" />
        <label for="checkbox2">增量加载</label>
        
        <select id="filename" placeholder="文件名称"></select>
        <button id="btn">导入</button>
    </div>
    <div id="gc-designer-container"></div>


</body>
<script type="text/javascript">
    let designer = new GC.Spread.Sheets.Designer.Designer("gc-designer-container");
    let spread = designer.getWorkbook();
    document.getElementById("btn").addEventListener("click", function () {
        let fileName = document.getElementById("filename").value
        fetch(`/api/download/template/${fileName}`).then(res => res.blob()).then(blob => {
            let checked1 = document.getElementById("checkbox1").checked
            console.log("懒加载：", checked1)
            let checked2 = document.getElementById("checkbox2").checked
            console.log("增量加载：", checked2)
            console.time("import time")
            let param = {}
            if (checked1) {
                param.openMode = GC.Spread.Sheets.OpenMode.lazy
            }
            if (checked2) {
                param.openMode = param.openMode | GC.Spread.Sheets.OpenMode.incremental
            }
            param.progress = function (e) {
                console.log(e)
            }
            spread.import(blob, function () {
                console.timeEnd("import time")
            }, function () { }, param)
        })
    })
    fetch('/api/get-file-list/template').then(res => res.json()).then(json => {
        let select = document.getElementById("filename")
        json.forEach(v => {
            let op = document.createElement("option")
            op.setAttribute("label", v)
            op.setAttribute("value", v)
            select.append(op)
        })
    })
</script>


</html>